<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>absolute样式</title>
    <style type="text/css">
    div {
        width: 200px;
        height: 200px;
        border: 2px red solid;
        position:absolute;
        right:100px;
        top:20px;
    }
    </style>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

<!-- 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，
这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 -->

<!-- 
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

-->